// input form
import { useContext } from "react";
import Context from "./context";

export default function InputForm({ handleSubmit }) {
  const { router, list } = useContext(Context);

  return (
    <div>
      <form
        className="relative mx-auto flex max-w-2xl items-center"
        onSubmit={handleSubmit}
      >
        <textarea
          placeholder="Send a message"
          className="h-[78px] flex-1 resize-none scroll-m-2 rounded-md border border-zinc-200/80 bg-zinc-200/50 pb-12 text-base transition-colors focus:border-zinc-400 focus:outline-none focus:ring-0 sm:text-sm"
          spellCheck="false"
        ></textarea>
        <div className="@sm:gap-2 absolute bottom-2 right-2 inline-flex items-center justify-end gap-1">
          <button
            type="submit"
            className="group inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-md border border-zinc-700 bg-zinc-900 px-3 py-1.5 text-sm font-medium text-zinc-100 shadow-md transition-colors hover:bg-zinc-800 hover:text-zinc-300 disabled:cursor-not-allowed disabled:border-zinc-200 disabled:bg-white disabled:text-zinc-400 disabled:shadow-none disabled:hover:text-zinc-400"
            disabled=""
          >
            Send
            <span className="text-center text-xs text-zinc-100/60 transition-colors group-hover:text-zinc-100/40 group-disabled:text-zinc-300/60 group-disabled:group-hover:text-zinc-300/60">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stokewidth="2"
                stroke="currentColor"
                aria-hidden="true"
                className="h-5 w-5"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                ></path>
              </svg>
            </span>
          </button>
        </div>
      </form>
    </div>
  );
}
